<template>
    <div class="main">
        <el-row :span="24">
            <el-col :span="12" class='inline'>
                <el-card class="box-card  bg-purple"><!-- purplebg--->






                        <router-link :to="{name: '项目列表'}" style='text-decoration: none;color: #000000;'><h1>{{projectCount}}个项目</h1></router-link>
                    <div>项目数量:{{projectCount}}/{{projectCountAll}}<br/>启用率<el-progress :text-inside="true" :stroke-width="15"
                    :percentage="project_per"
                    :format="format"
                      color="#409EFF"
                    status="success"></el-progress></div>
                </el-card>
            </el-col>
            <el-col :span="12" class='inline'>
                <el-card class="box-card bg-purple1">
                    <router-link :to="{name: '模块列表'}" style='text-decoration: none;color: #000000;'><h1>{{modelCount}}个模块</h1></router-link>
                    <div>模块数量:{{modelCount}}/{{modelCountAll}}<br/>启用率<el-progress :text-inside="true" :stroke-width="15"
                    :percentage="model_per"
                    :format="format"
                      color="#409EFF"
                    status="success"></el-progress></div>
                </el-card>
            </el-col>
            <el-col :span="12" class='inline'>
                <el-card class="box-card bg-purple2">
                    <router-link :to="{name: '用例维护'}" style='text-decoration: none;color: #000000;'><h1>{{caseCount}}个用例</h1></router-link>

                    <div>用例数量:{{caseCount}}/{{caseCountAll}}<br/>启用率<el-progress :text-inside="true" :stroke-width="15"
                    :percentage="case_per"
                    :format="format"
                      color="#409EFF"
                    status="success"></el-progress></div>
                </el-card>
            </el-col>



        </el-row>

        <el-row :span="24">

            <el-col :span="12" class='inline'>
                <el-card class="box-card bg-purple">
                    <router-link :to="{name: '环境列表'}" style='text-decoration: none;color: #000000;'><h1>{{envCount}}个环境</h1></router-link>
                    <div>环境数量:{{envCount}}/{{envCountAll}}<br/>启用率
                <el-progress :text-inside="true" :stroke-width="15"
                    :percentage="env_per"
                    :format="format"
                      color="#409EFF"
                    status="success"></el-progress></div>
                </el-card>


            </el-col>
            <el-col :span="12" class='inline'>
                <el-card class="box-card bg-purple1">
                      <router-link :to="{name: '接口维护'}" style='text-decoration: none;color: #000000;'><h1>{{interfaceCount}}个接口</h1></router-link>

                    <div>接口数量:{{interfaceCount}}/{{interfaceCountAll}}<br/>启用率
                        <el-progress :text-inside="true" :stroke-width="15"
                    :percentage="interface_per"
                    :format="format"
                    color="#409EFF"
                    status="success"></el-progress>

                    </div>
                </el-card>
            </el-col>
             <el-col :span="12" class='inline'>
                <el-card class="box-card bg-purple2">
                 <router-link :to="{name: '测试执行结果查询'}" style='text-decoration: none;color: #000000;'><h1>{{runResultCount}}条执行结果</h1></router-link>

                    <div>执行结果数{{runResultCountSuccess}}/{{runResultCount}}<br/>执行通过率<el-progress :text-inside="true" :stroke-width="15"
                    :percentage="result_per"
                    :format="format"
                      color="#409EFF"
                    status="success"></el-progress></div>
                </el-card>
            </el-col>


        </el-row>
        <!--
        <el-row :span="24">


            <el-col :span="12" class='inline'>
                <el-card class="box-card">
                       <router-link :to="{name: '接口测试执行'}" style='text-decoration: none;color: #409EFF;'><h1>执行接口</h1></router-link>

                    <div>执行接口</div>
                </el-card>
            </el-col>
        </el-row>-->

    </div>
</template>

<script>
   import { getLyHome } from '../../../../api/api'
    export default {
        data() {
            return {
                /**构建参数**/
                projectCount: '',
                apiCount: '',
                caseCount: '',
                modelCount:'',
                environmentCount:'',
                runResultCount: '',
                projectCountAll: '',
                apiCountAll: '',
                caseCountAll: '',
                modelCountAll:'',
                environmentCountAll:'',
                runResultCountSuccess: '',
                project_per:'',
                model_per:'',
                interface_per:'',
                case_per:'',
                env_per:'',
                result_per:''
            }
        },
        methods: {
         getHomeInfo() {
                var self = this;
                //let params = { project_id: this.$route.params.project_id};
                let headers = {
                        "Content-Type": "application/json",
                        Authorization: 'Token '+JSON.parse(sessionStorage.getItem('token'))
                };
                getLyHome(headers).then(_data => {
                   let { msg, code, data } = _data;
                   self.listLoading = false;
                        if (code === '999999') {
                            self.projectCount = data.projectCount;
                            self.interfaceCount = data.interfaceCount;
                            self.caseCount = data.caseCount;
                            self.modelCount = data.modelCount;
                            self.envCount = data.envCount;
                            self.runResultCount = data.runResultCount;

                            self.projectCountAll = data.projectCountAll;
                            self.interfaceCountAll = data.interfaceCountAll;
                            self.caseCountAll = data.caseCountAll;
                            self.modelCountAll = data.modelCountAll;
                            self.envCountAll= data.envCountAll;
                            self.runResultCountSuccess = data.runResultCountSuccess;

                            self.project_per=data.project_per
                            self.model_per=data.model_per
                            self.interface_per=data.interface_per
                            self.case_per=data.case_per
                            self.env_per=data.env_per
                            self.result_per=data.result_per
                        }
                        else {
                            self.$message.error({
                                message: msg,
                                center: true,
                            })
                        }
                });

        },

        },
        mounted() {
            this.getHomeInfo()
        }
    }
</script>

<style lang="scss" scoped>
    .box-card {
        border:1.5px solid #a6bbe2;
        width:450px;
        height: 80%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main {
        margin:0px;
        margin-top: 50px;
    }
    .inline {
        margin:50 px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .bg-purple {
    background: #ffffff;
  }
  .bg-purple1 {
    background: #ffffff;
  }
   .bg-purple2 {
    background: #ffffff;
  }
</style>
